<template>

  <div class="">
<!--    <div class="my-1 text-gray-700 text-left">-->
<!--      {{props.label}}：-->
<!--    </div>-->
    <div class="flex space-x-1 items-center ">

      <div class="w-60">
        <q-select
            outlined
            bg-color="white"
            v-model="select1"

            input-debounce="0"
            :label="props.label+'-修饰键'"
            :options="optionData"
            color="cyan-6"
        >
        </q-select>

      </div>
      <div class="w-2">
        <span>+</span>
      </div>
      <div class="w-32">
        <q-select
            outlined
            v-model="select2"

            square
            stack-label

            input-debounce="0"
            :label="'触发键'"
            :options="subKeys"
            @filter="filterFn"
            color="cyan-6"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                No results
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
    </div>

  </div>


</template>

<script lang="ts" setup>
import {defineEmits, defineExpose, defineProps, onMounted, ref, watch} from "vue"
import {KeyboardPreWinArray} from "../constant/enums/keyboard_pre_win";
import {KeyboardSufWinArray} from "../constant/enums/keyboard_suf_win";
import {FormatOptionLangs, OptionInfo} from "../utils/ops";
import {GetLang} from "../constant/lang/LangFunc";

const optionData=ref<OptionInfo[]>([])
onMounted( () => {
  optionData.value=  FormatOptionLangs(KeyboardPreWinArray)
})

const props=defineProps({
  label:{
    type:String,
    default:"触发快捷键"
  },

})

const select1=ref<OptionInfo>()
const select2=ref("")

const emit=defineEmits(["SelectChange"])
watch(select1,(newVal,oldVal)=>{
    console.log(newVal," ---newVal")
    emit("SelectChange",newVal?.value,select2.value)
})

watch(select2  ,(newVal,oldVal)=>{
   emit("SelectChange",select1.value?.value,newVal)
})

defineExpose({
  GetCurrKey1,GetCurrKey2,GetFullCurrKey,SetStrKey
})

function GetCurrKey1() :String{
  return select1.value ? select1.value?.value : ""
}
function GetCurrKey2() :String{
  return select2.value
}

function GetFullCurrKey() :String{
  if(select1.value?.value == "" && select2.value =="") return ""
  return select1.value?.value.trim() + "+" + select2.value.trim()
}
async function SetStrKey(keyStr: string) {
  let res = keyStr.split("+").map(s => s.trim())
  if (res.length == 2) {
    let SufLang = GetLang(res[0])
    select1.value = {label: SufLang, value: res[0]}
    select2.value = res[1]
  }
}


const subKeys=ref<string[]>([])
function  filterFn (val :any, update :any) {
  if (val === '') {
    update(() => {
      subKeys.value = KeyboardSufWinArray
    })
    return
  }

  update(() => {
    const needle = val.toLowerCase()
    subKeys.value = KeyboardSufWinArray.filter(v => v.toLowerCase().indexOf(needle) > -1)
  })
}

</script>

<style scoped>
.combo-box-container {
  display: flex;
  align-items: center;
}

.combo-box {
  width: 80px;
  margin-right: 20px;
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  border: 1px solid rgba(10, 10, 10, 0.3);
  outline: none;

  /* Optional: Add transition */
  transition: all 0.2s ease-in-out;
}

.combo-box:hover,
.combo-box:focus {
  border-color: #000;
}
</style>
